<h3>描述</h3>
<h4>第一步是总览页，并且同时显示多个引导信息</h4>
<p>只支持在最后一步显示多个引导信息，且是以tip的形式呈现，需要传入关闭引导的元素</p>
<h3>示例</h3>
<button (click)="start()" tiButton>开始引导</button>

<button type="button" #finish tiButton class="finish">结束引导</button>
<div class="container">
  <span #introStep1 style="top: 10px; left: 30px">1号新功能</span>
  <span #introStep2 style="bottom: 100px; left: 80px; position: fixed">2号新功能（固定定位）</span>
  <span #introStep3 style="right: 10px; top: 30px; transform: translateX(-150px)">3号新功能（transform定位）</span>
  <span #introStep4 style="bottom: 100px; left: 30px">4号新功能（不在视口）</span>
  <span #introStep5 style="right: 30px; bottom: 50px" class="circle">5号</span>
</div>
<style>
  .container {
    height: 1200px;
    margin: 50px;
    position: relative;
  }
  .finish {
    /* z-index必须大于5000 */
    z-index: 5001;
    bottom: 200px;
    position: fixed;
    left: 50%;
    transform: translatex(-50%);
  }
  .container span {
    position: absolute;
    padding: 4px 8px;
  }
  .container button {
    position: absolute;
  }

  .circle {
    display: inline-block;
    height: 25px;
    background-color: pink;
  }
</style>
<ng-template #introTem>
  <img src="assets/food/coffee.png" style="width: 300px; height: 160px" />
</ng-template>
